import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import { TabBar } from 'antd-mobile'

import './tab-footer.scss'

const TabBarItem = TabBar.Item


export class TabFooter extends Component {

  static propTypes = {
    tabBarList: PropTypes.array.isRequired,
    userType: PropTypes.string.isRequired,
    unreadCount: PropTypes.number.isRequired
  }

  render() {
    let { tabBarList, userType, unreadCount } = this.props
    if (userType === 'dashen') {
      tabBarList = tabBarList.filter( tab => tab.path !== '/laoban' )
    } else {
      tabBarList = tabBarList.filter( tab => tab.path !== '/dashen' )
    }
    
    const path = this.props.location.pathname
    return (
      <div className="myBar">
        <TabBar>
        {
          tabBarList.map(tab => (
            <TabBarItem
              badge={tab.path === '/message' ? unreadCount : 0}
              key={tab.path}
              title={tab.text}
              icon={{ uri: require(`../../assets/images/${tab.icon}.png`) }}
              selectedIcon={{ uri: require(`../../assets/images/${tab.icon}-active.png`) }}
              selected={tab.path === path} 
              onPress={()=> this.props.history.replace(tab.path)}/>
          ))
        }
        </TabBar>
      </div>
    )
  }
}

export default withRouter(TabFooter)

